import React, { Component } from "react";
import { Form, Input, Button, Row, Col, Radio, Select, DatePicker, Modal } from "antd";
import moment from "moment";
import Content from "../../components/Content";
const { Item } = Form;
const { TextArea } = Input;
const { Option } = Select; 
const dateFormat = "YYYY-MM-DD HH:mm:ss";

class MediumUpdateForm extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  state = {
    options: {},
    newData:{}
  };

  handleChange = value => {
    this.setState({
      medium_type: value
    });
  };

  loadData = (current = 1) => {

    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false
      });
    }, 1000);

    const url = global.api.getMediumCF + '?_t=' + (new Date()).valueOf();
    return global.getdata.get(url, {page_index: current, page_size: this.state.pageSize})
    .then(res => {
      this.setState({options: res, newData: {}})
    })
    .catch(err => {
      Modal.error({
        content: '网络异常!',
      });
    }) 

  }

  componentDidMount() {
    this.loadData(1);
  }

  onSubmit = evt => {
    evt.preventDefault();

    this.state.newData.mediumcf = this.state.newData.mediumcf.join(',');

    const url = global.api.medium;
    return global.network.post(url, this.state.newData)
    .then(res => {
      Modal.success({
        content: '保存成功！'
      })
    })
    .catch(err => {
      Modal.error({
        content: 'Err: 保存失败！'
      })
    }) 

  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      }
    };

    return (
      <Form {...formItemLayout} onSubmit={this.onSubmit} colon={false}>
        <Item label="培养基编号">
          <Input id="medium_sn" onChange={e => this.state.newData.medium_sn = e.target.value} />
        </Item>
        <Item label="培养基名称">
          <Input id="medium_name" onChange={e => this.state.newData.medium_name = e.target.value} />
        </Item>
        <Item label="培养基成分">
          <Select 
            style={{ width: 180 }}
            onChange={value => this.state.newData.mediumcf = value } 
            placeholder="请选择成分"

            mode="tags"
            tokenSeparators={[","]}
            showArrow={true}

          >
                { this.state.options && this.state.options.map((item)=>
                    <Option value={item.name}>{item.name}</Option>
                )}
            </Select>  
        </Item>
        <Item label="培养基条件">
          <Input id="medium_tj" onChange={e => this.state.newData.medium_tj = e.target.value} />
        </Item>
        <Item label="培养基类型">
          <Select
            mode="tags"
            id="medium_type"
            style={{ width: "100%" }}
            onChange={e => this.state.newData.medium_type = e[0]}             
            tokenSeparators={[","]}
            showArrow={true}
          >
            <Option value="cd">通用</Option>
            <Option value="zj">重要</Option>
            <Option value="gj">特殊</Option>
          </Select>
        </Item>
        <Item label="添加时间">
          <DatePicker onChange={(a,b) => this.state.newData.add_time = b} format={dateFormat} id="add_time" />
        </Item>
        <Item label="备注说明">
          <TextArea id="remark" autosize={{ minRows: 2, maxRows: 6 }}  onChange={e => this.state.newData.remark = e.target.value} />
        </Item>

        <Item wrapperCol={{ offset: 3 }}>
          <Row guuter={16}>
            <Col>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
            </Col>
          </Row>
        </Item>
      </Form>
    );
  }
}
const WrapperedUpdate_mediumForm = Form.create({
  name: "add acquisition"
})(MediumUpdateForm);

class MediumAdd extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onSubmit = () => {
    const { form } = this.form.props;
    form.validateFields((errs, values) => {
      console.log(errs, values);
    });
  };
  render() {
    return (
      <Content>
        <WrapperedUpdate_mediumForm
          wrappedComponentRef={ref => (this.form = ref)}
          onSubmit={this.onSubmit}
        />
      </Content>
    );
  }
}

export default MediumAdd;
